<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/东方启音/icon/iconfont.css">
    <link rel="stylesheet" href="/东方启音/css/foot.css">
    <link rel="stylesheet" href="/东方启音/css/hear.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            overflow: hidden;
        }

        .list-ico {
            height: 38px;
            line-height: 38px;
            padding-left: 32px;
            color: #666;
            cursor: pointer;
            position: relative;
            background-color: #eee;
        }

        .list-ico i {
            display: inline-block;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1;
        }

        .for {
            color: #495060;
            padding: 0 16px;
            background-color: #fff;
            display:none;
        }
        .forr{
            display:block;
        }
        .for img {
            display: block;
            width: 200px;
            height: auto;
            margin: 20px auto;
        }

        .ppts {
            padding-top: 16px;
            padding-bottom: 16px;
        }

        .sps {
            padding-top: 30px 0 10px;
            margin: 10px px 0;
            font-size: 16px;
            color: #39f;
            border-bottom: 1px solid #9c0;
            display: flex;
            justify-content: space-between;
        }

        .sps i {
            font-size: 12px;
            color: #999;
            font-style: normal;
        }

        * {
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <script src="/东方启音/js/hear.js"></script>
    <div class="nav">
        <div class="nav-title"></div>
        <div class="nav-foot">
            <div class="nav-list">
                <div class="list-ico" onclick="ff()">
                    <i class="iconfont icon-zhijiao-triangle"></i>
                    全部
                </div>
                <div class="list-for">
                    <div class="for"></div>
                </div>

            </div>
            <div class="nav-list">
                <div class="list-ico">
                    <i class="iconfont icon-zhijiao-triangle"></i>
                    美国专家
                </div>
                <div class="list-for">
                    <div class="for"></div>
                </div>
            </div>
            <div class="nav-list">
                <div class="list-ico">
                    <i class="iconfont icon-zhijiao-triangle"></i>
                    香港专家
                </div>
                <div class="list-for">
                    <div class="for"></div>
                </div>
            </div>
            <div class="nav-list">
                <div class="list-ico">
                    <i class="iconfont icon-zhijiao-triangle"></i>
                    国内专家
                </div>
                <div class="list-for">
                    <div class="for"></div>
                </div>
            </div>
            <div class="nav-list">
                <div class="list-ico">
                    <i class="iconfont icon-zhijiao-triangle"></i>
                    国内治疗师
                </div>
                <div class="list-for">
                    <div class="for"></div>
                </div>
            </div>
        </div>
    </div>


    
    <script src="/东方启音/js/foot.js"></script>
</body>
<script>
    //  右上角点击
    function list() {
        document.querySelector('.menu').classList.toggle('show')

    }
    var fors = document.querySelector('.for')
    var xhr = new XMLHttpRequest();
    //  一般情况post传参直接放到send()里这种传参方式称为(requestBody), requestBody一般都是对象
    xhr.open('post', 'http://47.116.75.38:8101/web/team/experts/list')
    xhr.setRequestHeader('Content-Type', "application/json;charset=UTF-8")    // 头部协议要一致 否则报415
    xhr.send(
        JSON.stringify(
            {
                "current": 1,  //  第一页
                "size": 20,    // 表示分页加载 每页十条
                "params": {
                    "userId": "",
                    "areaId": "",
                    "teamId": ""
                },
                "orderBy": ""
            })
    );
    xhr.onload = function () {
        var da = JSON.parse(xhr.response).data.records
        console.log(da);
        for (var i = 0; i < da.length; i++) {
            var p = document.createElement("div")
            p.className = "ppts"
            var span = document.createElement("div")
            span.className = "sps"
            var em = document.createElement("em")
            em.innerText = da[i].specialistName
            var ii = document.createElement("i")
            ii.innerText = da[i].nationality + '专家'
            var img = document.createElement("img")
            img.src = da[i].headPicture
            var span1 = document.createElement("div")
            span1.innerText = da[i].introduce
            p.appendChild(span)
            p.appendChild(img)
            p.appendChild(span1)
            span.appendChild(em)
            span.appendChild(ii)
            fors.appendChild(p)
        }
        
    }
    // var ffi=document.querySelector('.list-ico i')
    // console.log(ffi)
    function ff(){
        document.querySelector('.for').classList.toggle('forr')
        document.querySelector('.list-ico i').classList.toggle('icon-zelvxuanzefeiyongdaosanjiaoxingfandui')
        }
</script>

</html>